<template lang="html">
	<div class="typelist">
		<div class="container" v-for="(item,index) in classInfoData" :key="index">
			<div class="container-left">
				<img src="../assets/img/sild1.png" alt="">
			</div>
			<div class="container-right">
				<p class="desc">{{item.title}}</p>
				<p class="author">{{item.author}}</p>
				<p class="time">{{item.time}} <a>{{item.buy}}</a></p>				
			</div>
		</div>
		<div v-show="markFlag" class="mark">等待加载数据...</div>
		<div class="more">
	         <div @click="getMoreHandler" class="Lookmore">查看更多...</div>
	    </div>
	</div>
</template>
<script>
	export default{
		name:'typelist',
		data(){
			return{
				classInfoData:[],
				markFlag:true
			}
		},
		mounted(){
           this.getcategoryInfo()
		},
		methods:{
			getMoreHandler(){
              this.getcategoryInfo()
              this.markFlag = true
			},
			getcategoryInfo(){
			  this.$axios.get(this.HOST+"/home")
				.then(res => {
                  this.markFlag = false
				  var allData = this.classInfoData.concat(res.data.data )
	              this.classInfoData =  allData             
				})
				.catch(error => {
					console.log(error)
				})
			}
			
		}
	}
</script>
<style lang="less" scoped>
	.container{
		margin-bottom: 10px;
		padding:0 20px;
		overflow: hidden;
		.container-left{
			float:left;
			img{
				width:140px;
                height:110px;
			}
		}
		.container-right{
			padding:10px 0;
			float:right;
			p{
            	height:30px;
            	line-height: 30px;
            }
			.desc{
				width:176px;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				font-weight: bold;
			}
			.author{
				font-size: 14px;
				font-weight:bold;
			}
            .time{
            	font-size: 14px;
            	a{
            		font-size: 12px;
            		display: inline-block;
            		float:right;
            	}
            }
		}
	}
	.more{
	  height: 30px;
	  line-height: 30px;
	  margin-bottom: 80px;
	  .Lookmore{
	  	text-align: center
	  }	  
	}
	
</style>